HTML Basics: Using lists

A list can be a simple summary of items, but it can also provide explanations for these items. The last is called a definition list in HTML. The first two can be subdivided into ordered and unordered lists. Each have their own specific usages, as is explained below.

Ordered lists

In an ordered list, indicated with the OL element, each item is numbered according to its location in the list. It is most commonly used to present a list of items or actions which have to be processed in the exact order given, or which appeared in this order.

The numbering can be controlled with the optional TYPE attribute. It has five possible values:

1 - Arabic numbers (default) (1, 2, 3, 4, ...)
a - Alphanumeric, lowercase (a, b, c, d, ...)
A - Alphanumeric, lowercase (A, B, C, D, ...)
i - Roman numbers, lowercase (i, ii, iii, iv, ...)
I - Roman numbers, uppercase (I, II, III, IV, ...)

An item in an ordered list is indicated with the LI element.

Example

In this example, an ordered list is used to explain a (fictional) installation procedure. The steps should be carried out in the order given. Because the TYPE attribute is set to "A", the numbering should be in uppercase letters rather than numbers.

<OL TYPE="A">
<LI>Insert the disk labeled "Disk 1" into drive A:.
<LI>Type <KBD>a:install</KBD> at a DOS prompt.
<LI>Answer the questions which will appear on your screen according to
your system's configuration.
<LI>Remove the diskette from your computer and reboot.
</OL>

Unordered lists

In an unordered list, indicated with UL, there is no requirement about the order of the elements. All elements (also indicated with the LI element) will be identified with the same icon, which is usually called a bullet.

The type of bullet can be suggested with the TYPE attribute. You have three possible styles: "disc" for a closed bullet, "square" for an open square and "circle" for an open bullet. In nested lists, these types are used to indicate the level of nesting, so you can immediately see how "deep" a particular item is in the list. If you use the TYPE attribute in nested lists, you should use it on each list so the items in different levels are indicated differently.

Example

The following example explains when to use quotes around values for attributes in HTML elements. The second item in the list contains a list itself; it should be presented with a different type of bullet. The indentation used for the nested list is purely to make the source more readable, it is not required and does not affect the display of the actual list.

<H2>An attribute value can be:</H2>
<UL>
<LI>A string literal, enclosed in double or single quotes and not
containing the enclosing quote.
<LI>A name token, which is built up with
    <UL>
    <LI>Letters
    <LI>Digits
    <LI>Periods
    <LI>Hyphens
    </UL>
</UL>

DIR and MENU

The DIR and MENU elements are from the early days of HTML. They were originally intended for specific types of unordered lists, but in most browsers they were rendered identical to normal unordered lists. There is no way to change the bullet in these lists, though. Some browsers do not even display a bullet for these lists (which is quite legal to do, by the way).

Definition lists

A definition list is used to contain a collection of terms and their accompanying definitions. This explains why a definition list needs two elements for each item in the list. The first defines the term, and the second provides its definition.

Think of a definition list as a glossary or similar. The definition of the term follows the term itself, and is usually displayed directly below or after it, with a suitable indent. It is technically legal to have an unbalanced number of terms and definitions, or a sequence of just terms or definitions in a definition list. In practice, however, this should not be done.

Terms

A term in a definition list is indicated with the DT element. A term may only contain text-level markup.

Definitions

The definition of a term, defined in a DT element, should appear directly below it, in a DD element. It may contain almost every HTML element to provide the definition.

Example

The following example gives a short explanation on some abbreviations. The indentation used for the DD parts is purely to make the source more readable. It does not affect the actual rendering by the browser.

<H2>List of abbreviations</H2>
<DL>
<DT>HTML
    <DD>Hyper Text Markup Language, a very popular, SGML-defined, markup
    language.
<DT>SGML
    <DD>Standard Generalized Markup Language, a "meta language" to define
    markup languages.
<DT>WWW
    <DD>World-Wide Web. No explanation necessary.
</DL>

Reference index ~ HTML Basics index ~ Feedback